<template>
  <div class="content-div">
    <div class="bg-img">
      <el-row style="padding-top:40px; padding-bottom:30px" type="flex" justify="center"></el-row>
      <el-row type="flex" justify="center">
        <el-col :span="24" style="text-align: center;">
          <el-form :inline="true" label-width="68px">
            <el-form-item prop="keyword">
              <el-input
                v-model="keyword"
                placeholder="请输入搜索内容"
                clearable
                style="width:400px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="medium "
                @click="handleQuery"
              >搜索</el-button>
              <el-button
                  type="primary"
                  icon="el-icon-s-release"
                  size="medium "
                  @click="resetQuery"
              >重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--********************展示列表数据********************* -->
    <div class="result-content">
      <ol v-loading="loading" style="padding: 10px;">
        <div class="data-list" v-if="total>0" v-for="item in list">
          <el-row>
            <a v-html="item.nameText||item.electNameText" @click="openDetails(item)"></a>
          </el-row>
          <div class="detail-div" v-html="item.searchDataText"></div>
          <el-divider></el-divider>
        </div>
        <el-empty :image-size="200" v-if="total<=0" description="暂无数据"></el-empty>
      </ol>
    </div>
    <div>
      <el-pagination
          v-show="total > 0"
          background
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          layout="->, total, sizes, prev, pager, next, jumper"
          :total="total"
          @pagination="handleQuery"
          @size-change="handleQuery"
          @current-change="handleQuery"
      ></el-pagination>
    </div>
    <FilePreviewDialog id="filePreviewDialog" ref="filePreviewDialogRef">

    </FilePreviewDialog>
  </div>
</template>

<script>

import {searchElect} from "@/api/system/esSearch";
import FilePreviewDialog from "@/components/FilePreview/FilePreviewDialog.vue";

export default {
  components: {FilePreviewDialog},
  data() {
    return {
      // 总条数
      total: 0,
      keyword: null, // 检索内容
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 查询案卷级返回结果
      list: [],
      //红色样式
      isCaseTitle: false,
      // 加载动画
      loading: false,
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },
  created() {

  },
  watch: {

  },
  computed: {

  },
  methods: {

    // 搜索
    handleQuery(page) {
      this.queryParams["keyword"] = this.keyword;
      this.queryParams["pageNum"] = parseInt(page)||1;
      this.loading = true;
      searchElect(this.queryParams).then((res) => {
        this.list = res["rows"];
        this.total=res["total"];
      }).finally(e => {
        this.loading = false;
      })

    },
    /** 重置查询参数 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }; // 重置查询参数
      this.keyword = null; // 重置查询关键字
      this.handleQuery();
    },
    openDetails(item) {
      console.log(item);
      //this.$refs.filePreviewDialogRef.showDialog("pdf", this.baseUrl + "/profile/upload/FilesBak/20241021180711-公文3.pdf")
      //this.$refs.filePreviewDialogRef.showDialog("jpg", this.baseUrl + "/profile/upload/FilesBak/20241024111222-01.jpg")
      this.$refs.filePreviewDialogRef.showDialog(item.electType, this.baseUrl + item.electPath)
    }
  }
};
</script>

<style lang="scss" scoped>
.app-main {
  overflow: hidden;
}
.content-div {
  height: 100%;
}

.bodyBg {
  background-image: url("../../../assets/images/body_bg.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.bg-img {
  height: 128px;
  background-image: url("../../../assets/images/bg-client.jpeg");
  background-size: cover;
}

.result-content {
  height: calc(100% - 170px);
  overflow: auto;
}
.data-list {
  font-size: 14px;
  a {
    color: #06f;
    cursor: pointer;
  }

  .detail-div {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制展示的行数 */
    overflow: hidden;
    text-overflow: ellipsis; /* 文本超出时显示省略号 */
  }
}

::v-deep em {
  color: red;
  font-style: normal;
}
</style>
